<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="1200px">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
			<el-form-item label="父订单" prop="pay_sn">
				<el-input v-model="queryParams.pay_sn" placeholder="父订单" clearable />
			</el-form-item>
			<el-form-item label="子订单" prop="order_sn_str">
				<el-input v-model="queryParams.order_sn_str" placeholder="多个订单号用英文逗号隔开" clearable />
			</el-form-item>
			<el-form-item label="商品名称" prop="goods_id">
				<el-select
					v-model="queryParams.goods_id"
					filterable
					remote
					clearable
					placeholder="请输入选择商品名称"
					:remote-method="goodsIdRemoteMethod"
					:loading="goodsIdLoading"
					@focus="onGoodsIdFocus"
					@clear="onGoodsIdClear"
				>
					<el-option v-for="item in goodsIdOptions" :key="item.id" :label="item.title" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="下单开始时间" prop="create_time_start">
				<el-date-picker v-model="queryParams.create_time_start" type="date" clearable value-format="X" placeholder="请选择开始时间" />
			</el-form-item>
			<el-form-item label="下单结束时间" prop="create_time_end">
				<el-date-picker v-model="queryParams.create_time_end" type="date" clearable value-format="X" placeholder="请选择结束时间" />
			</el-form-item>
			<el-form-item label="支付开始时间" prop="pay_time_start">
				<el-date-picker v-model="queryParams.pay_time_start" type="date" clearable value-format="X" placeholder="请选择开始时间" />
			</el-form-item>
			<el-form-item label="支付结束时间" prop="pay_time_end">
				<el-date-picker v-model="queryParams.pay_time_end" type="date" clearable value-format="X" placeholder="请选择结束时间" />
			</el-form-item>
			<el-form-item label="收货地址" prop="area">
				<el-cascader v-model="queryParams.area" :props="shippingAddressProps" placeholder="请选择省市区" clearable />
			</el-form-item>
			<el-form-item label="收货人手机号" prop="address_mobile">
				<el-input v-model="queryParams.address_mobile" placeholder="收货人手机号" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block mb8">
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-tabs type="border-card" @tab-click="onSwitchTab" v-model="queryParams.status">
			<el-tab-pane label="全部" name="0" />
			<el-tab-pane label="待付款" name="1" />
			<el-tab-pane label="待发货" name="2" />
			<el-tab-pane label="备货中" name="3" />
			<el-tab-pane label="待收货" name="4" />
			<el-tab-pane label="已完成" name="5" />
			<el-tab-pane label="退款中" name="6" />
			<el-tab-pane label="已退款" name="7" />
		</el-tabs>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="父订单" align="center" prop="pay_sn" />
			<el-table-column label="子订单" align="center" prop="order_sn" />
			<el-table-column label="商品名" align="center" prop="goods_title" />
			<el-table-column label="封面图" align="center" prop="option_icon">
				<template #default="scope">
					<img style="width: 60px; height: auto" :src="scope.row.option_icon" />
				</template>
			</el-table-column>
			<el-table-column label="商品销售价" align="center" prop="option_price" />
			<el-table-column label="数量" align="center" prop="num" />
			<el-table-column label="优惠金额" align="center" prop="discount_amount" />
			<el-table-column v-if="!getUserInfos.is_bank" label="实际支付" align="center" prop="real_pay" />
			<el-table-column label="收货人信息" align="center">
				<template #default="scope">
					<div>{{ scope.row.address_name }}</div>
					<div>{{ scope.row.address_mobile }}</div>
					<div>{{ scope.row.province + scope.row.city + scope.row.county }}</div>
				</template>
			</el-table-column>
			<el-table-column label="时间轴" align="center">
				<template #default="scope">
					<el-link type="success" @click="onViewTimeLine(scope.row)">查看时间</el-link>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center" prop="status">
				<template #default="scope">
					{{ orderStatusText(scope.row.status) }}
				</template>
			</el-table-column>
			<el-table-column
				label="退款状态"
				align="center"
				prop="refund_status"
				v-if="queryParams.status == '0' || queryParams.status == '6' || queryParams.status == '7'"
			>
				<template #default="scope">
					{{ refundStatusText(scope.row.refund_status) }}
				</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<time-line-dialog ref="timeLineRef" />
	</el-dialog>
</template>

<script lang="ts">
import { computed, reactive, ref, toRefs } from 'vue';
import { getAreaList } from '/@/api/admin';
import { bankApi, orderList, orderSelectGoods } from '/@/api/admin1';
import { useStore } from '/@/store';
import { endTimePlus, timeDictionary } from '/@/utils/dictionaryTranslation';
import { orderStatusText, refundStatusText } from '/@/utils/utils';

import TimeLineDialog from '../../../order/order/dialog/TimeLineDialog.vue';

const BankApi = bankApi();
export default {
	components: {
		TimeLineDialog,
	},
	setup() {
		const state = reactive({
			showSearch: true,
			title: '消费记录',
			open: false,
			queryParams: {
				status: '0',
				pageNum: 1,
				pageSize: 10,
				pay_sn: '',
				order_sn_str: '',
				goods_id: '',
				supplier_id: '',
				user_id: '',
				create_time_start: '',
				create_time_end: '',
				pay_time_start: '',
				pay_time_end: '',
				area: [],
				address_mobile: '',
			},
			tableList: [],
			loading: false,
			total: 0,
			goodsIdOptions: [] as any,
			goodsIdLoading: false,
			shippingAddressProps: {
				checkStrictly: true,
				lazy: true,
				lazyLoad(node: any, resolve: any) {
					const {
						data: { id },
						level,
					} = node;
					_getAreaList({ id: level ? id : 100000 }, level, resolve);
				},
				value: 'name',
				label: 'name',
			},
		});
		const store: any = useStore();

		const queryFormRef = ref(null);
		const timeLineRef = ref(null);

		// 获取用户信息 vuex
		const getUserInfos = computed(() => {
			return store.state.userInfos.userInfos;
		});

		/********** 点击事件(on开头) **********/
		// 选择商品
		const onGoodsIdFocus = () => {
			if (!state.queryParams.goods_id) {
				state.goodsIdLoading = true;
				getUserInfos.value.is_bank ? _bankOrderSelectGoods() : _orderSelectGoods();
			}
		};
		// 清空商品
		const onGoodsIdClear = () => {
				getUserInfos.value.is_bank ? _bankOrderSelectGoods() : _orderSelectGoods();
		};
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
		//查看时间
		const onViewTimeLine = (val: any) => {
			(timeLineRef.value as any)?.openDialog(val);
		};
		//切换tabs
		const onSwitchTab = () => {
			getList();
		};
		/********** 方法事件 **********/
		// 打开
		const openDialog = (config: any) => {
			state.open = true;
			state.title = `「${config.row.nickname}」消费记录`;
			state.queryParams = {
				status: '0',
				pageNum: 1,
				pageSize: 10,
				pay_sn: '',
				order_sn_str: '',
				goods_id: '',
				supplier_id: '',
				create_time_start: '',
				create_time_end: '',
				pay_time_start: '',
				pay_time_end: '',
				area: [],
				address_mobile: '',
				user_id: config.row.id,
			};
			getList();
		};
		const getList = () => {
			state.loading = true;
			getUserInfos.value.is_bank
				? _bankOrderList({
						...state.queryParams,
						province: state.queryParams.area[0],
						city: state.queryParams.area[1],
						county: state.queryParams.area[2],
						create_time_end: endTimePlus(state.queryParams.create_time_start, state.queryParams.create_time_end),
						pay_time_end: endTimePlus(state.queryParams.pay_time_start, state.queryParams.pay_time_end),
				})
				: _orderList({
						...state.queryParams,
						province: state.queryParams.area[0],
						city: state.queryParams.area[1],
						county: state.queryParams.area[2],
						create_time_end: endTimePlus(state.queryParams.create_time_start, state.queryParams.create_time_end),
						pay_time_end: endTimePlus(state.queryParams.pay_time_start, state.queryParams.pay_time_end),
				});
		};
		// 操作时间
		const formatterTime = (row: any) => {
			return timeDictionary(row.time);
		};
		// 商品搜索
		const goodsIdRemoteMethod = (query: string) => {
			if (query) {
				state.goodsIdLoading = true;
				getUserInfos.value.is_bank ? _bankOrderSelectGoods({ title: query }) : _orderSelectGoods({ title: query });
			} else {
				return true;
			}
		};

		/********** 网络请求 **********/
		// 选择商品（搜索）
		const _orderSelectGoods = (_data: object = {}) => {
			orderSelectGoods(_data)
				.then((res: any) => {
					console.log('选择商品（搜索）', res);
					state.goodsIdOptions = res.data.list;
					state.goodsIdLoading = false;
				})
				.catch(() => {
					state.goodsIdLoading = false;
				});
		};
		// 订单列表
		const _orderList = (_data: any) => {
			orderList(_data)
				.then((res: any) => {
					console.log('订单列表', res);
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};
		// 选择省市区
		const _getAreaList = (_data: object, _level: number, resolve: any) => {
			getAreaList(_data).then((res: any) => {
				console.log('选择省市区', res);
				let nodes = res.data.list.map((item: any) => ({
					id: item.id,
					name: item.name,
					leaf: _level >= 2,
				}));
				resolve(nodes);
			});
		};
		// 选择商品（搜索）
		const _bankOrderSelectGoods = (_data: object = {}) => {
			BankApi.orderSelectGoods(_data)
				.then((res: any) => {
					console.log('选择商品（搜索）', res);
					state.goodsIdOptions = res.data.list;
					state.goodsIdLoading = false;
				})
				.catch(() => {
					state.goodsIdLoading = false;
				});
		};
		// 订单列表
		const _bankOrderList = (_data: any) => {
			BankApi.orderList(_data)
				.then((res: any) => {
					console.log('订单列表', res);
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};

		return {
			queryFormRef,
			timeLineRef,
			getList,
			onSwitchTab,
			onQuery,
			onResetQuery,
			openDialog,
			formatterTime,
			onGoodsIdFocus,
			onGoodsIdClear,
			onViewTimeLine,
			goodsIdRemoteMethod,
			orderStatusText,
			refundStatusText,
			getUserInfos,
			...toRefs(state),
		};
	},
};
</script>
